<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	<base href="<%=basePath%>">
    
    <title></title>
	<%@ include file="/pages/mainPage/header.jsp" %>
	<script type="text/javascript" src="<%=path%>/include/Highcharts-4.0.3/js/highcharts.js"></script>
	<script type="text/javascript" src="<%=path%>/include/Highcharts-4.0.3/js/highcharts-more.js"></script>
  <style type="text/css">
  span.text{color: rgb(153, 153, 153);}
  table th[class*="span"] {
    display: table-cell;
    float: none;
    margin-left: 0;
    min-height: 30px;
  }
  .table{width: 100%;}
  .dataTable {
	    margin-bottom: 10px;
	    clear: both;
	    border-top: 1px solid #ddd;
	}
  .table td.span2, .table th.span2 {
    float: none;
    width: 124px;
    margin-left: 0;
	}
	.table tr th, .table tr td {
	    padding: 5px;
	}
	.table tr td {
	    border-top: 1px dotted #ddd;
	}
	.table tr th {
	    vertical-align: middle;
	    background: #eee;
	    font-weight: bold;
	}
	.table-bordered th, .table-bordered td {
	    border-left: 1px solid #ddd;
	}
	.table-bordered  {
	    border: 1px solid #ddd;
	}
  </style>
	</head>
	<body id="corcenter_newl">
		<div id="contentDiv" style="padding:4px; width:99%;">
			<div class="colnums-2-ab-b">
				<div class="toptil">销售分析</div>
			</div>
			<div style="height: auto;">
				<div style="height: auto;">
					<div class="table-title" style="margin-bottom:20px;"><span class="text">昨日关键指标：</span></div>
					<div>
					<table style="margin: 20px 0px; width: 100%; position: relative; table-layout: fixed;">
						<tr>
							<td style="height: 70px; border-right: rgb(231, 231, 235) 1px solid;">
								<div style="height: 100%; text-align: center; overflow: hidden; position: relative;">
								<dl style="padding: 0px; text-align: left; margin-top: 0px; display: inline-block; position: relative; z-index: 2;">
									<dt style="text-align: center; padding-bottom: 12px; font-size: 14px; font-weight: normal;">
										<b>入账金额（￥）</b>
									</dt>
									<dd style="line-height: 18px; font-size: 14px; margin-top: 2px; white-space: nowrap;text-align: center; color: rgb(103, 103, 103); font-size: 30px; margin-right: 10px; margin-bottom: 15px;">
										<strong style="font-style: normal; font-weight: 400;"><c:out value='${dateInfo.IN_MONEY}'/></strong><em style="font-size: 18px; font-style: normal; font-weight: 400; margin-bottom: 20px;"></em>
									</dd>
								</dl>
								</div>
							</td>
							<td style="height: 70px; border-right: rgb(231, 231, 235) 1px solid;">
								<div style="height: 100%; text-align: center; overflow: hidden; position: relative;">
								<dl style="padding: 0px; text-align: left; margin-top: 0px; display: inline-block; position: relative; z-index: 2;">
									<dt style="text-align: center; padding-bottom: 12px; font-size: 14px; font-weight: normal;">
										<b>出账金额（￥）</b>
									</dt>
									<dd style="line-height: 18px; font-size: 14px; margin-top: 2px; white-space: nowrap;text-align: center; color: rgb(103, 103, 103); font-size: 30px; margin-right: 10px; margin-bottom: 15px;">
										<strong style="font-style: normal; font-weight: 400;"><c:out value='${dateInfo.OUT_MONEY}'/></strong><em style="font-size: 18px; font-style: normal; font-weight: 400; margin-bottom: 20px;"></em>
									</dd>
								</dl>
								</div>
							</td>
							<td style="height: 70px; border-right: rgb(231, 231, 235) 1px solid;">
								<div style="height: 100%; text-align: center; overflow: hidden; position: relative;">
								<dl style="padding: 0px; text-align: left; margin-top: 0px; display: inline-block; position: relative; z-index: 2;">
									<dt style="text-align: center; padding-bottom: 12px; font-size: 14px; font-weight: normal;">
										<b>净入账金额（￥）</b>
									</dt>
									<dd style="line-height: 18px; font-size: 14px; margin-top: 2px; white-space: nowrap;text-align: center; color: rgb(103, 103, 103); font-size: 30px; margin-right: 10px; margin-bottom: 15px;">
										<strong style="font-style: normal; font-weight: 400;"><c:out value='${dateInfo.NET_MONEY}'/></strong><em style="font-size: 18px; font-style: normal; font-weight: 400; margin-bottom: 20px;"></em>
									</dd>
								</dl>
								</div>
							</td>
							<td style="height: 70px; ">
								<div style="height: 100%; text-align: center; overflow: hidden; position: relative;">
								<dl style="padding: 0px; text-align: left; margin-top: 0px; display: inline-block; position: relative; z-index: 2;">
									<dt style="text-align: center; padding-bottom: 12px; font-size: 14px; font-weight: normal;">
										<b>账户余额（￥）</b>
									</dt>
									<dd style="line-height: 18px; font-size: 14px; margin-top: 2px; white-space: nowrap;text-align: center; color: rgb(103, 103, 103); font-size: 30px; margin-right: 10px; margin-bottom: 15px;">
										<strong style="font-style: normal; font-weight: 400;"><c:out value='${dateInfo.OVER_MONEY}'/></strong><em style="font-size: 18px; font-style: normal; font-weight: 400; margin-bottom: 20px;"></em>
									</dd>
								</dl>
								</div>
							</td>
						</tr>
					</table>
					</div>
				</div>
				<div style="height: auto;" >
					<div class="table-title" style="margin-bottom:20px;"><span class="text">关键指标详解：</span></div>
					<div style="padding-left:50px;padding-right:50px;">
						<input type="hidden" id="dateRange" name="dateRange" value="7"/>
					 	<input type="hidden" id="analysisType" name="analysisType" value=""/>
					 	<div style="width:98%;min-width:600px;height:40px;line-height:40px;padding:0px;margin:10 20 0 20;border:1px solid #e0e0e0;background-color:#F4F5F9;">
					 		<div style="width:10%;min-width:100px;height:40px;line-height:40px;padding:0px;margin:0px;float:left;text-align:center;border-right:0px solid #e0e0e0;">关键指标详解</div>
					 		<div id="titleDiv" style="cursor:pointer;width:10%;min-width:100px;height:40px;line-height:40px;padding:0px;margin:0px;float:left;text-align:center;border-right:0px solid #e0e0e0;background-color:#368EE0;" onclick="_change(0)" nowrap>入账金额</div>
					 		<div id="titleDiv" style="cursor:pointer;width:10%;min-width:100px;height:40px;line-height:40px;padding:0px;margin:0px;float:left;text-align:center;border-right:0px solid #e0e0e0;" onclick="_change(1)" nowrap>出账金额</div>
					 		<div id="titleDiv" style="cursor:pointer;width:10%;min-width:100px;height:40px;line-height:40px;padding:0px;margin:0px;float:left;text-align:center;border-right:0px solid #e0e0e0;" onclick="_change(2)" nowrap>净入账金额</div>
					 		<div id="titleDiv" style="cursor:pointer;width:10%;min-width:100px;height:40px;line-height:40px;padding:0px;margin:0px;float:left;text-align:center;border-right:0px solid #e0e0e0;" onclick="_change(3)" nowrap>账户余额</div>
					 	</div>
					 	<div style="width:98%;min-width:600px;height:40px;line-height:40px;padding:0px;margin:0 20 10 20;border:1px solid #e0e0e0;border-top:0px;background-color:#F4F5F9;">
					 		<div style="width:10%;min-width:100px;height:40px;line-height:40px;padding:0px;margin:0px;float:left;text-align:center;border-right:0px solid #e0e0e0;">时间</div>
					 		<div id="timeDiv" style="cursor:pointer;width:10%;min-width:100px;height:40px;line-height:40px;padding:0px;margin:0px;float:left;text-align:center;border-right:0px solid #e0e0e0;background-color:#368EE0;" onclick="_timeChange(0)">7天</div>
					 		<div id="timeDiv" style="cursor:pointer;width:10%;min-width:100px;height:40px;line-height:40px;padding:0px;margin:0px;float:left;text-align:center;border-right:0px solid #e0e0e0;" onclick="_timeChange(1)">14天</div>
					 		<div id="timeDiv" style="cursor:pointer;width:10%;min-width:100px;height:40px;line-height:40px;padding:0px;margin:0px;float:left;text-align:center;border-right:0px solid #e0e0e0;" onclick="_timeChange(2)">30天</div>
					 		<div id="timeDiv" style="cursor:pointer;display:none;width:30%;height:40px;line-height:40px;padding:0px;margin:0px;float:left;text-align:center;border-right:1px solid #e0e0e0;" onclick="_timeChange(3)">
					 			<span style="">时间范围：</span>&nbsp;&nbsp;
								<input type="text" id="beginDate" name="beginDate" class="wDate" style="width: 100px; cursor: hand;" value="2015-05-23" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly">
								&nbsp;-&nbsp;
								<input type="text" id="endDate" name="endDate" class="wDate" style="width: 100px; cursor: hand;" value="2015-06-01" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly">
								&nbsp;&nbsp;
							</div>
					 	</div>
					 	<div id="mainDiv" style="width:auto;margin:0px;padding:0px;overflow:auto;height:auto;">
							<div id="chartDiv" style="overflow:hidden;margin:0px;padding:0px;">
								<!-- 报表区域 -->
								<div id="container1"></div>
							</div>
							<div id="chartDiv" style="overflow:hidden;margin:0px;padding:0px;display:none;">
								<!-- 报表区域 -->
								<div id="container2"></div>
							</div>
							<div id="chartDiv" style="overflow:hidden;margin:0px;padding:0px;display:none;">
								<!-- 报表区域 -->
								<div id="container3"></div>
							</div>
							<div id="chartDiv" style="overflow:hidden;margin:0px;padding:0px;display:none;">
								<!-- 报表区域 -->
								<div id="container4"></div>
							</div>
						</div>
						<div  style="width:98%;min-width:600px;height:40px;line-height:40px;padding:0px;margin:10 20 0 20;border:1px solid #e0e0e0;height: auto;">
							<table id="listTable" class="table table-bordered table-hover dataTable">
								<thead>
									<tr>
										<th class="span2" style="text-align:center;" nowrap> 日期 </th>
										<th class="span2" style="text-align:center;" nowrap> 入账金额（￥） </th>
										<th class="span2" style="text-align:center;" nowrap> 出账金额（￥） </th>
										<th class="span2" style="text-align:center;" nowrap> 净入账金额（￥） </th>
										<th class="span2" style="text-align:center;" nowrap> 账户余额（￥） </th>
									</tr>
								</thead>
								<tbody id="tbody">
								</tbody>
							</table>
						</div>
				 	</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
  $(document).ready(function(){
  		$("#dateRange").val('7');
		$("#analysisType").val('0');
		// 页面加载成功后 显示报表
		dateRange = $("#dateRange").val();
		analysisType = $("#analysisType").val();
		_queryChartData(dateRange,analysisType);
		_queryTableData();
  });
  
  function _change(index){
		$("div[id='titleDiv']").eq(index).css("background-color","#368EE0");
		$("div[id='titleDiv']").eq(index).siblings().css("background-color","#F4F5F9");
		$("#analysisType").val(index);
		analysisType = index;
		dateRange = $("#dateRange").val();
		_queryChartData(dateRange,analysisType);
	}
  function _queryChartData(dateRange,analysisType){
	$("div[id='chartDiv']").eq(analysisType).show();
	$("div[id='chartDiv']").eq(analysisType).siblings().hide();
	var danwei = "";
	var chartid = "";
	if(analysisType == 0){//新增人数
		chartid = "container1";
	}else if(analysisType == 1){//取消关注人数
		chartid = "container2";
	}else if(analysisType == 2){//净增人数
		chartid = "container3";
	}else if(analysisType == 3){//累计人数
		chartid = "container4";
	}else{//新增人数
		chartid = "container1";
	}
	$.ajax({
		type:"post",
		url:"<%=path%>/shopDateSell/queryChartData",
		dataType: "text",
		data: {
			dateRange:dateRange,
			analysisType:analysisType
		},
		success:function(data){
			console.info(data);
			var temp = data.split('#@');
			var title = temp[0];
			var x_array = temp[1];
			var seriesData = temp[2];
			var num = 0;
			if(dateRange == 30){
				num = 3;
			}else if(dateRange == 14){
				num = 2;
			}
			_lineChart(chartid,title,x_array,seriesData,danwei,num);
			}
		});	
	}
	function _timeChange(index){
		$("#pageSize").val(1);
		$("div[id='timeDiv']").eq(index).css("background-color","#368EE0");
		$("div[id='timeDiv']").eq(index).siblings().css("background-color","#F4F5F9");
		if(index == 0){//7天
			dateRange = 7;
		}else if(index == 1){//14天
			dateRange = 14;
		}else if(index == 2){//30天
			dateRange = 30;
		}
		$("#dateRange").val(dateRange);
		analysisType = $("#analysisType").val();
		_queryChartData(dateRange,analysisType);
		_queryTableData();
	}
	function _queryTableData(){
		var dateRange = $("#dateRange").val();
		$.ajax({
			type:"post",
			url:"<%=path %>/shopDateSell/queryTableData.do",
			dataType:"json",
			async: false,
			data:{
				dateRange:dateRange
			},
			success:function(data){
				var str = "";
				for(var i=0;i<data.length;i++){
					str += "<tr>";
					str += "	<td style='text-align:center;font-size:12px;'>" + data[i].CUR_DATE + "</td>";
					str += "	<td style='text-align:right;font-size:12px;'>" + data[i].IN_MONEY + "</td>";
					str += "	<td style='text-align:right;font-size:12px;'>" + data[i].OUT_MONEY + "</td>";
					str += "	<td style='text-align:right;font-size:12px;'>" + data[i].NET_MONEY + "</td>";
					str += "	<td style='text-align:right;font-size:12px;'>" + data[i].OVER_MONEY + "</td>";
					str += "</tr>";
				}
				if(data.length < 1){
					str += "<tr>";
					str += "	<td style='text-align:center;' colspan='5'><span class='text' style='color:grey;'>暂无数据</span></td>";
					str += "</tr>";
				}
				$("#tbody").html(str);
				_reHeight("rightFrame","contentDiv");
			}
		});
	}
	//折线图图表
	//chartid图标ID,title图表表体,x_array X轴刻度值名称数组
	//data_name1数据一名称,data_array1数据一数值(数组)
	//data_name2数据二名称,data_array2数据二数值(数组)
	//danwei单位
	//num 间隔多少个值显示
	function _lineChart(chartid,title,x_array,seriesData,danwei,num){
		$('#'+chartid).highcharts({
	        chart: {
	            type: 'line',
	            height: 240
	        },
	        title: {
	            text: title
	        },
	        subtitle: {
	            text: ''
	        },
	        exporting:{
	            enabled: false
	        },
	        credits:{
	            enabled: false
	        },
	        xAxis: {
	        	tickInterval: num,
	            categories: eval("(" + x_array + ")"),
	            labels:{ 
                    //x:45,//调节x偏移 
                    //y:-35,//调节y偏移 
                    //rotation:25//调节倾斜角度偏移 
                 }
	        },
	        yAxis: {
	            title: {
	                text: danwei
	            }
	        },
	        tooltip: {
	           enabled: true
	        },
	        plotOptions: {
	            line: {
	       //         dataLabels: {
	       //             enabled: true
	       //         }
	            }
	        },
	        series: eval("(" + seriesData + ")")
	    });
	    _reHeight("rightFrame","contentDiv");
	}
  </script>
</html>